```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cloud Mail - 免费的自定义域名邮件解决方案</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background-color: #f8fafc;
            color: #1b1c1d;
            line-height: 1.6;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .feature-icon {
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
        }
        .drop-cap::first-letter {
            font-size: 3.5rem;
            line-height: 1;
            float: left;
            margin-right: 0.75rem;
            margin-top: 0.5rem;
            color: #3b82f6;
            font-weight: bold;
        }
        .timeline-item:not(:last-child)::after {
            content: '';
            position: absolute;
            left: 2.25rem;
            top: 4rem;
            height: calc(100% - 4rem);
            width: 2px;
            background-color: #e2e8f0;
        }
        .animate-float {
            animation: float 6s ease-in-out infinite;
        }
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }
    </style>
</head>
<body class="antialiased">
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 px-4 md:py-32">
        <div class="container mx-auto max-w-6xl px-4">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-12 md:mb-0">
                    <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">
                        免费打造您的<span class="text-indigo-200">专属</span>邮箱服务
                    </h1>
                    <p class="text-xl md:text-2xl text-indigo-100 mb-8">
                        Cloud Mail - 基于Cloudflare的零成本邮件解决方案
                    </p>
                    <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
                        <a href="https://github.com/eoao/cloud-mail" class="bg-white text-indigo-600 hover:bg-indigo-50 px-8 py-3 rounded-lg font-semibold text-lg transition duration-300 flex items-center justify-center">
                            <i class="fab fa-github mr-2"></i> GitHub 仓库
                        </a>
                        <a href="#features" class="bg-indigo-500 hover:bg-indigo-600 text-white px-8 py-3 rounded-lg font-semibold text-lg transition duration-300 flex items-center justify-center">
                            <i class="fas fa-star mr-2"></i> 功能亮点
                        </a>
                    </div>
                </div>
                <div class="md:w-1/2 flex justify-center">
                    <img src="https://illustrations.popsy.co/amber/digital-nomad.svg" alt="邮件服务插图" class="w-3/4 animate-float">
                </div>
            </div>
        </div>
    </section>

    <!-- Introduction Section -->
    <section class="py-16 px-4 bg-white">
        <div class="container mx-auto max-w-6xl px-4">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">
                    <span class="text-indigo-600">Cloud Mail</span> 是什么?
                </h2>
                <div class="w-24 h-1 bg-indigo-500 mx-auto mb-6"></div>
                <p class="max-w-3xl mx-auto text-lg text-gray-700">
                    Cloud Mail 是一款响应式、极简风格的邮件服务，专为在 Cloudflare 平台上免费部署而设计。它帮助个人或小型团队利用自己的域名建立专属邮件服务，同时避免传统的服务器费用。
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="bg-gray-50 p-8 rounded-xl shadow-sm hover:shadow-md transition duration-300">
                    <div class="feature-icon w-16 h-16 rounded-full flex items-center justify-center text-white mb-6 mx-auto">
                        <i class="fas fa-wallet text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-center">零服务器成本</h3>
                    <p class="text-gray-600 text-center">
                        依托 Cloudflare Workers，实现真正免费的邮件服务搭建，告别昂贵的服务器费用。
                    </p>
                </div>
                <div class="bg-gray-50 p-8 rounded-xl shadow-sm hover:shadow-md transition duration-300">
                    <div class="feature-icon w-16 h-16 rounded-full flex items-center justify-center text-white mb-6 mx-auto">
                        <i class="fas fa-shield-alt text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-center">注重隐私安全</h3>
                    <p class="text-gray-600 text-center">
                        强大人机验证和基于角色的访问控制，确保您的邮件数据和系统安全。
                    </p>
                </div>
                <div class="bg-gray-50 p-8 rounded-xl shadow-sm hover:shadow-md transition duration-300">
                    <div class="feature-icon w-16 h-16 rounded-full flex items-center justify-center text-white mb-6 mx-auto">
                        <i class="fas fa-cogs text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-center">高度可定制</h3>
                    <p class="text-gray-600 text-center">
                        支持自定义网站标题、登录背景，并能灵活控制各项功能开关。
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Feature Details Section -->
    <section id="features" class="py-16 px-4 bg-gray-50">
        <div class="container mx-auto max-w-6xl px-4">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">核心功能与优势</h2>
                <div class="w-24 h-1 bg-indigo-500 mx-auto mb-6"></div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
                <div class="bg-white p-8 rounded-xl shadow-sm card-hover transition duration-300">
                    <div class="flex items-center mb-6">
                        <div class="feature-icon w-12 h-12 rounded-full flex items-center justify-center text-white mr-4">
                            <i class="fas fa-paper-plane"></i>
                        </div>
                        <h3 class="text-2xl font-bold">强大邮件收发</h3>
                    </div>
                    <p class="text-gray-700 mb-4">
                        集成 Resend 服务，支持群发、嵌入图片和附件，并提供邮件状态追踪功能，让您的沟通更高效。
                    </p>
                    <ul class="space-y-2">
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>支持多种格式的附件上传与下载</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>实时追踪邮件发送状态</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>优化的邮件发送队列管理</span>
                        </li>
                    </ul>
                </div>

                <div class="bg-white p-8 rounded-xl shadow-sm card-hover transition duration-300">
                    <div class="flex items-center mb-6">
                        <div class="feature-icon w-12 h-12 rounded-full flex items-center justify-center text-white mr-4">
                            <i class="fas fa-users"></i>
                        </div>
                        <h3 class="text-2xl font-bold">多账户管理</h3>
                    </div>
                    <p class="text-gray-700 mb-4">
                        允许单一用户添加并管理多个邮箱地址，便于集中处理不同身份的邮件，提升工作效率。
                    </p>
                    <ul class="space-y-2">
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>统一管理多个邮箱账户</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>支持自定义邮箱别名</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>角色权限精细控制</span>
                        </li>
                    </ul>
                </div>

                <div class="bg-white p-8 rounded-xl shadow-sm card-hover transition duration-300">
                    <div class="flex items-center mb-6">
                        <div class="feature-icon w-12 h-12 rounded-full flex items-center justify-center text-white mr-4">
                            <i class="fas fa-chart-line"></i>
                        </div>
                        <h3 class="text-2xl font-bold">直观数据可视化</h3>
                    </div>
                    <p class="text-gray-700 mb-4">
                        利用 Echarts 展示系统数据、用户及邮件增长趋势，让管理更清晰，决策更有依据。
                    </p>
                    <div class="mermaid">
                        pie
                            title 邮件类型分布
                            "工作邮件" : 45
                            "个人邮件" : 30
                            "订阅邮件" : 15
                            "垃圾邮件" : 10
                    </div>
                </div>

                <div class="bg-white p-8 rounded-xl shadow-sm card-hover transition duration-300">
                    <div class="flex items-center mb-6">
                        <div class="feature-icon w-12 h-12 rounded-full flex items-center justify-center text-white mr-4">
                            <i class="fas fa-robot"></i>
                        </div>
                        <h3 class="text-2xl font-bold">自动化通知</h3>
                    </div>
                    <p class="text-gray-700 mb-4">
                        将重要邮件自动转发至 Telegram 等即时通讯工具，确保信息不遗漏，随时随地掌握最新动态。
                    </p>
                    <div class="mermaid">
                        graph LR
                            A[收到新邮件] --> B{重要邮件?}
                            B -->|是| C[发送到Telegram]
                            B -->|否| D[存入收件箱]
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Use Cases Section -->
    <section class="py-16 px-4 bg-white">
        <div class="container mx-auto max-w-6xl px-4">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">适用场景</h2>
                <div class="w-24 h-1 bg-indigo-500 mx-auto mb-6"></div>
                <p class="max-w-3xl mx-auto text-lg text-gray-700">
                    Cloud Mail 能有效解决多种邮件管理问题，提升您的工作效率
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="bg-indigo-50 p-8 rounded-xl border-l-4 border-indigo-500 transition duration-300 hover:shadow-md">
                    <h3 class="text-xl font-bold mb-4 text-indigo-800">个人品牌建设</h3>
                    <p class="text-gray-700 mb-4">
                        为您的个人品牌或博客创建专业后缀的邮箱 (如 yourname@yourdomain.com)，显著提升专业形象。
                    </p>
                    <div class="flex items-center text-indigo-600">
                        <i class="fas fa-user-tie mr-2"></i>
                        <span>自由职业者</span>
                    </div>
                </div>
                <div class="bg-indigo-50 p-8 rounded-xl border-l-4 border-indigo-500 transition duration-300 hover:shadow-md">
                    <h3 class="text-xl font-bold mb-4 text-indigo-800">小型团队协作</h3>
                    <p class="text-gray-700 mb-4">
                        为初创公司或小型团队提供经济高效的邮件解决方案，每个成员都能拥有公司域名的专属邮箱。
                    </p>
                    <div class="flex items-center text-indigo-600">
                        <i class="fas fa-users mr-2"></i>
                        <span>创业团队</span>
                    </div>
                </div>
                <div class="bg-indigo-50 p-8 rounded-xl border-l-4 border-indigo-500 transition duration-300 hover:shadow-md">
                    <h3 class="text-xl font-bold mb-4 text-indigo-800">多账户整合</h3>
                    <p class="text-gray-700 mb-4">
                        如果您管理着多个邮箱账户，Cloud Mail 可提供统一入口，简化操作流程，提高工作效率。
                    </p>
                    <div class="flex items-center text-indigo-600">
                        <i class="fas fa-mail-bulk mr-2"></i>
                        <span>多身份用户</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Getting Started Section -->
    <section class="py-16 px-4 bg-gray-50">
        <div class="container mx-auto max-w-6xl px-4">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">快速开始</h2>
                <div class="w-24 h-1 bg-indigo-500 mx-auto mb-6"></div>
                <p class="max-w-3xl mx-auto text-lg text-gray-700">
                    只需简单几步，即可搭建您的专属邮件服务
                </p>
            </div>

            <div class="max-w-4xl mx-auto">
                <div class="relative">
                    <!-- Timeline Item 1 -->
                    <div class="relative timeline-item pl-16 pb-12">
                        <div class="absolute left-0 top-0 w-10 h-10 rounded-full bg-indigo-500 flex items-center justify-center text-white font-bold">
                            1
                        </div>
                        <h3 class="text-xl font-bold mb-2">准备环境</h3>
                        <p class="text-gray-700">
                            安装 Node.js v18.20+，并准备好 Cloudflare 账号及已绑定域名。
                        </p>
                    </div>

                    <!-- Timeline Item 2 -->
                    <div class="relative timeline-item pl-16 pb-12">
                        <div class="absolute left-0 top-0 w-10 h-10 rounded-full bg-indigo-500 flex items-center justify-center text-white font-bold">
                            2
                        </div>
                        <h3 class="text-xl font-bold mb-2">克隆项目</h3>
                        <p class="text-gray-700">
                            从 GitHub 仓库获取代码：
                            <code class="bg-gray-200 px-2 py-1 rounded text-sm">git clone https://github.com/eoao/cloud-mail.git</code>
                        </p>
                    </div>

                    <!-- Timeline Item 3 -->
                    <div class="relative timeline-item pl-16 pb-12">
                        <div class="absolute left-0 top-0 w-10 h-10 rounded-full bg-indigo-500 flex items-center justify-center text-white font-bold">
                            3
                        </div>
                        <h3 class="text-xl font-bold mb-2">配置与部署</h3>
                        <p class="text-gray-700">
                            配置 <code class="bg-gray-200 px-2 py-1 rounded text-sm">wrangler.toml</code> 文件，在 Cloudflare 创建 D1、KV 和 R2 数据库，随后执行部署命令。
                        </p>
                    </div>

                    <!-- Timeline Item 4 -->
                    <div class="relative timeline-item pl-16 pb-12">
                        <div class="absolute left-0 top-0 w-10 h-10 rounded-full bg-indigo-500 flex items-center justify-center text-white font-bold">
                            4
                        </div>
                        <h3 class="text-xl font-bold mb-2">初始化数据库</h3>
                        <p class="text-gray-700">
                            访问特定 API 路径初始化数据库，为系统准备基础数据。
                        </p>
                    </div>

                    <!-- Timeline Item 5 -->
                    <div class="relative pl-16">
                        <div class="absolute left-0 top-0 w-10 h-10 rounded-full bg-indigo-500 flex items-center justify-center text-white font-bold">
                            5
                        </div>
                        <h3 class="text-xl font-bold mb-2">配置邮件发送</h3>
                        <p class="text-gray-700">
                            在 Resend 注册并获取 API 密钥，将其添加到 Cloud Mail 的设置中，即可开始使用。
                        </p>
                    </div>
                </div>

                <div class="mt-12 bg-indigo-50 p-8 rounded-xl">
                    <h3 class="text-xl font-bold mb-4 text-center">成本说明</h3>
                    <p class="text-gray-700 text-center">
                        Cloud Mail 本身是开源且免费的，主要成本在于域名注册费用。邮件发送功能依赖于 Resend 服务，其免费额度可满足大部分个人用户需求。
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="py-20 px-4 hero-gradient text-white">
        <div class="container mx-auto max-w-4xl text-center">
            <h2 class="text-3xl md:text-4xl font-bold mb-6">准备好开始使用 Cloud Mail 了吗？</h2>
            <p class="text-xl text-indigo-100 mb-8 max-w-2xl mx-auto">
                立即访问 GitHub 仓库，获取完整文档并开始部署您的专属邮件服务。
            </p>
            <a href="https://github.com/eoao/cloud-mail" class="inline-block bg-white text-indigo-600 hover:bg-indigo-50 px-8 py-3 rounded-lg font-semibold text-lg transition duration-300">
                <i class="fab fa-github mr-2"></i> 获取 Cloud Mail
            </a>
        </div>
    </section>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            fontFamily: 'Noto Sans SC, sans-serif'
        });
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
    </script>
</body>
</html>
```